<template>
  <div class="container">
    <div class="container-top">
      <div class="top-name">售后订单</div>
    </div>
    <div class="input_modal">
      <div class="modal-list">      
        <div class="input-item">
          <span class="name">订单号：</span>
          <el-input
            v-model="refundOrderCodeLike"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
        <div class="input-item">
          <span class="name">用户手机号：</span>
          <el-input
            v-model="userMobileLike"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
      </div>
      <div class="modal-list">
        <div class="input-item">
          <span class="name">售后类型：</span>
          <el-select v-model="refundType" placeholder="请选择">
            <el-option
              v-for="item in refundTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="input-item">
          <span class="name">售后状态：</span>
          <el-select v-model="refundStatus" placeholder="请选择">
            <el-option
              v-for="item in refundStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="modal-list">      
        <div class="input-item">
          <span class="name">售后单号：</span>
          <el-input
            v-model="refundCodeLike"
            placeholder="请输入"
            class="proName"
            @keyup.enter.native="searchCity"
          />
        </div>
      </div>
      <div class="btns-top">
        <el-button type="primary" size="mini" @click="getList()" icon="el-icon-search">查询</el-button>
        <el-button
            size="mini"
            icon="el-icon-refresh"
            @click="refresh"
          >重置</el-button>
      </div>
    </div>
    <div class="table_con">
      <el-table
        :data="tableData"
        :border='true'
      >
        <el-table-column prop="orderCode" label="订单号"></el-table-column>
        <el-table-column prop="refundOrderCode" label="售后单号"></el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <!-- <el-table-column prop="refundPrice" label="退款金额">
          <template slot-scope="scope">
            <div>
              <div>￥{{scope.row.refundPrice}}</div>
              <div>(含运费￥{{scope.row.freightPrice}})</div>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="refundType" label="售后类型">
          <template slot-scope="scope">
            <div>{{refundTypeList.filter( item => {return item.value == scope.row.refundType}).length ? refundTypeList.filter( item => {return item.value == scope.row.refundType})[0].label : ''}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="售后原因">
          <template slot-scope="scope">
            <div :title="scope.row.reason" class="name-table">{{scope.row.reason}}</div>
          </template>  
        </el-table-column>、
        <el-table-column prop="refundStatus" label="售后状态">
          <template slot-scope="scope">
            <div>{{refundStatusList.filter( item => {return item.value == scope.row.refundStatus}).length ? refundStatusList.filter( item => {return item.value == scope.row.refundStatus})[0].label : ''}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="gmtCreated" label="申请时间"></el-table-column>
        <el-table-column prop="" label="操作" width='220'>
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="$router.push('/orderAfterDetail?id='+scope.row.id)">查看</el-button>
            <span v-if="scope.row.refundStatus=='WAIT_AUDIT'">
                <el-button type="success" size="mini" @click="handleAuditPass(scope.row)">审核通过</el-button>
                <el-button type="success" size="mini" @click="handleAuditNoPass(scope.row)">审核不通过</el-button>
            </span>
            <span v-if="scope.row.refundStatus=='IN_PROCESS'&&scope.row.refundOrderType == 'RMB_ORDINARY'">
                <el-button type="success" size="mini" @click="handleAudit(scope.row)">确认退款</el-button>
            </span>
            <!-- <el-button type="primary" size="mini" v-if="scope.row.refundStatus=='IN_PROCESS'" @click="handleConfirmRefund(scope.row)">确认{{scope.row.refundType === 'EXCHANGE_GOODS' ? '换货' : '退款'}}</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="auditTitle"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form :model="params" :rules="rules" ref="information" label-width="80px" class="">
        <el-form-item label="理由" prop="reason">
          <el-input type="textarea" :rows="4" v-model="params.reason" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAuditPass1('information')" v-if="auditTitle == '审核通过'">保 存</el-button>
          <el-button type="primary" @click="handleAuditNoPass1('information')" v-else-if="auditTitle == '审核不通过'">保 存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  export default {
    data() {
      return {
        tableData: [],
        orderCodeLike:'',
        refundCodeLike:'',
        refundStatus: "",
        refundType: "",
        userCodeLike: "",
        userMobileLike:"",
        pageCount: null,
        pageIndex: 1,
        pageSize: 10,
        refundStatusList: [{
          label: "默认",
          value: "NORMAL"
        },{
          label: "待审核",
          value: "WAIT_AUDIT"
        },{
          label: "处理中",
          value: "IN_PROCESS"
        },{
          label: "售后成功",
          value: "SUCCESS"
        },{
          label: "售后失败",
          value: "FAILURE"
        },{
          label: "已取消",
          value: "CANCEL"
        }],
        refundTypeList: [{
          label: "默认",
          value: "NORMAL"
        },{
          label: "仅退款",
          value: "ONLYREFUND"
        },{
          label: "退货",
          value: "REFUND_GOODS"
        },{
          label: "换货",
          value: "EXCHANGE_GOODS"
        }],
        loading: true,
        id: "",
        name: "",
        options: [{
          value: '选项1',
          label: '黄金糕'
        }],
        auditTitle: "",
        dialogVisible: false,
        params: {
          reason: "",
          refundCode: "",
          refundStatus: "",
        },
        rules: {
          reason: [{ required: true, message: "请输入理由", trigger: "blur" }],
        },
      };
    },
    mounted() {
      this.getList();
    },
    methods: {
      getLogD(){
        this.addressState = true
        let url = CONSTANT.URL.LIST.expQueryParam
        common.post(url, {  
          com:this.detail.logisticsCompany,
          no:this.detail.shipmentNumber
        }, res => {
          if (res.code == 200) {
            let data = res.data.bussData
            this.listInfo = data?JSON.parse(data):{}
            if(!this.listInfo||!this.listInfo.list){
              this.tipState = true
            }else{
              this.tipState = false
            }
          }
        })
      },
      refresh(){
        this.pageIndex = 1
        this.refundCodeLike = ''
        this.refundStatus = ''
        this.refundType = ''
        this.userMobileLike = ''
        this.getList()
      },
      getList: function() {
        let url = CONSTANT.URL.ORDER.refundList;
        let data = {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          orderCodeLike:this.orderCodeLike,
          refundOrderCodeLike:this.refundCodeLike,
          refundStatus: this.refundStatus,
          refundType: this.refundType,
          userCodeLike: this.userCodeLike,
          mobileLike:this.userMobileLike,
        };
        this.loading = true;
        common.post(url, data, res => {
          this.loading = false;
          let data = res.data;
          this.tableData = data.bussData;
          this.pageCount = data.count;
//          this.pageCount = data.pageCount * this.pageSize;
        });
      },
      deleteItem(id) {
        this.$confirm("确定删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let url = CONSTANT.URL.LIST.DELETEGOOD;
            common.requestAjax(url, null, { id: id }, res => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getList();
              } else {
                this.$message({
                  type: "warning",
                  message: res.msg
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      handleAuditPass(item) {
        this.params.refundCode = item.refundOrderCode
        this.params.refundStatus = "SUCCESS"
        this.dialogVisible = true
        this.auditTitle = "审核通过"
      },
      handleAuditPass1(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.loading = true;
            let url = CONSTANT.URL.LIST.REFUNDAUDIT
            common.post(url, this.params, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "保存成功"
                })
                this.getList()
                this.dialogVisible = false
              }
            })
          } else {
            return false;
          }
        });

      },
      handleAuditNoPass(item) {
        this.params.refundCode = item.refundOrderCode
        this.params.refundStatus = "FAILURE"
        this.dialogVisible = true
        this.auditTitle = "审核通过"
      },
      handleAudit(item) {
        this.$confirm(`是否确认退款给用户?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let url = CONSTANT.URL.LIST.REFUNDCONFIRM1;
            common.get(url, item.id, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "退款成功!"
                });
                this.getList();
              } else {
                this.$message({
                  type: "warning",
                  message: res.msg.errMsg
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      handleAuditNoPass1(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.loading = true;
            let url = CONSTANT.URL.RANK.add
            common.post(url, this.detail, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "保存成功"
                })
                this.getList()
                this.dialogVisible = false
              }
            })
          } else {
            return false;
          }
        });
      },
      handleConfirmRefund(item) {
        let title = item.refundType === 'EXCHANGE_GOODS' ? '换货' : '退款'
        this.$confirm(`确定${title}给用户?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let url = CONSTANT.URL.LIST.REFUNDCONFIRM;
            common.get(url, item.id, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: title + "成功!"
                });
                this.getList();
              } else {
                this.$message({
                  type: "warning",
                  message: res.msg.errMsg
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      editItem(id, type) {
        if (id == 1) {
          this.$router.push({
            name: "homeAdModal",
            query: { id: id, type: type, pageIndex: this.pageIndex }
          });
        } else if (id == 2) {
          this.$router.push({
            name: "homeBanner",
            query: { id: id, type: type, pageIndex: this.pageIndex }
          });
        } else if (id == 3) {
          this.$router.push({
            name: "homeFuncMenu",
            query: { id: id, type: type, pageIndex: this.pageIndex }
          });
        }
      },
      search: function(e) {
        if (e.keyCode == 13) {
          this.pageIndex = 1;
          this.getList();
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getList();
      },
      searchCity() {}
    },
    filters: {
      formatStatus(value) {
        var list = [];
        list["y"] = "上架";
        list["n"] = "下架";
        if (value) {
          return list[value];
        } else {
          return "--";
        }
      }
    }
  };
</script>
